<template>
  <a-card :visible="visible">
    <a-form :form="form">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="名称">
            <a-input style="border:0px;" placeholder="" v-decorator="['departName', {} ]"/>
          </a-form-item>
        </a-col>
        <a-col :lg="12">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级机构">
            <a-tree-select
              style="width:100%;border:0px;"
              :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
              :treeData="treeData"
              :disabled="disable"
              v-model="model.parentId"
              placeholder="">
            </a-tree-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="机构编码">
            <a-input style="border:0px;" disabled placeholder="" v-decorator="['orgCode', {} ]"/>
          </a-form-item>
        </a-col>
        <a-col :lg="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="机构类型">
            <a-radio-group :disabled="true" v-decorator="['orgCategory',{}]" placeholder="">
              <a-radio value="1">
                公司
              </a-radio>
              <a-radio value="2">
                部门
              </a-radio>
              <a-radio value="3">
                店铺
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="编号">
            <a-input style="border:0px;" placeholder="" v-decorator="['storeId', {} ]" :disabled="true"/>
          </a-form-item>
        </a-col>
        <a-col :lg="12">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="状态">
            <j-dict-select-tag style="border:0px;" :disabled="true"  v-decorator="[ 'status', {} ]" placeholder="状态" :triggerChange="true" dictCode="store_status"/>
          </a-form-item>
        </a-col>
      </a-row>
      <a-tabs v-model="activeKey" >
        <a-tab-pane tab="基本信息" key="1">
          <a-row class="form-row" :gutter="16">
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="联系人">
                <a-input style="border:0px;" placeholder="" v-decorator="['linkName', {}]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="联系电话">
                <a-input style="border:0px;" placeholder="" v-decorator="['phone', {}]"/>
              </a-form-item>
            </a-col>

          </a-row>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="所在地">
                <a-cascader :disabled="true" :options="areaData" v-model="areaValue"
                            placeholder=""/>
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="经营模式">
                <j-dict-select-tag style="border:0px;"  v-decorator="['joinType', {}]" placeholder="" :type="'radioButton'" :triggerChange="true" dictCode="join_type"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                style="margin-left: -115px"
                label="详细地址">
                <a-input style="border:0px;" placeholder="" v-decorator="['address', {}]"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="24">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                style="margin-left: -115px"
                label="备注">
                <a-textarea style="border:0px;" placeholder="" v-decorator="['memo', {}]"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>

        <a-tab-pane tab="扩展信息" key="2" forceRender>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="经度">
                <a-input-number style="border:0px;" v-decorator="[ 'longitude', {}]"/>
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="纬度">
                <a-input-number style="border:0px;" v-decorator="[ 'latitude', {}]"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="form-row" :gutter="16">
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="开始营业">
                <a-time-picker style="border:0px;" v-decorator="['dayTimeStart', {}]" valueFormat="HH:mm" format="HH:mm"/>
              </a-form-item>
            </a-col>
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="结束营业">
                <a-time-picker style="border:0px;" v-decorator="['dayTimeEnd', {}]" valueFormat="HH:mm" format="HH:mm"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row class="form-row" :gutter="16">
            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="补货周期">
                <a-input-number style="border:0px;" v-decorator="[ 'replenishmentDays', {}]"/>
                <span> 天</span>
              </a-form-item>
            </a-col>

            <a-col :lg="12">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="合同到期">
                <a-date-picker style="border:0px;" format='YYYY-MM-DD HH:mm:ss' v-decorator="[ 'endTime', {}]"/>
              </a-form-item>
            </a-col>
          </a-row>

          <a-row class="form-row" :gutter="16">
            <a-col :lg="8">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="图标">
                  <img :src="getPictureView()" alt="logo" style="height:104px;max-width:300px"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="logo">
                  <img :src="getLogoView()" alt="logo" style="height:104px;max-width:300px"/>
              </a-form-item>
            </a-col>
            <a-col :lg="8">
              <a-form-item
                :labelCol="labelCol"
                :wrapperCol="wrapperCol"
                label="小程序">
                <img :src="getQrCodeView()" alt="logo" style="height:104px;max-width:300px"/>
              </a-form-item>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>

    </a-form>
  </a-card>
</template>
<script>
  import pick from 'lodash.pick'
  import {queryIdTree} from '@/api/api'
  import { httpAction, getAction } from '@/api/manage'
  import moment from 'moment'

  export default {
    name: 'DeptStoreInfo',
    components: {},
    data() {
      return {
        departTree: [],
        id: '',
        model: {},
        visible: false,
        disable: true,
        treeData: [],
        activeKey: '1',
        areaData: [],
        areaValue: [],
        confirmLoading: false,
        uploadLoading:false,
        uploadLogoLoading:false,
        headers:{},
        pictureUrl: "",
        logoUrl: "",
        qrCodeUrl: "",
        form: this.$form.createForm(this),
        labelCol: {
          xs: {span: 24},
          sm: {span: 3}
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16}
        },
        url: {
          queryById: '/sys/sysDepartStore/queryById',
          areaJson: '/data/area',
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
        },
      }
    },
    created() {
      this.loadTreeData();
      this.getArea();
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      loadTreeData() {
        queryIdTree().then((res) => {
          if (res.success) {
            for (let i = 0; i < res.result.length; i++) {
              let temp = res.result[i];
              this.treeData.push(temp);
            }
          }

        })
      },
      open(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        getAction(this.url.queryById, {id:record.id}).then((res) => {
          if (res.success) {
            this.activeKey = '1'
            this.pictureUrl = res.result.picture;
            this.logoUrl = res.result.logo;
            this.qrCodeUrl = res.result.storeQrCode;
            this.areaValue = [res.result.provinceCode, res.result.cityCode, res.result.districtCode]
            this.$nextTick(() => {
              this.form.setFieldsValue(pick(res.result, 'departName','orgCategory', 'orgCode', 'departOrder', 'storeId', 'status', 'linkName', 'phone', 'joinType', 'address', 'memo', 'longitude', 'latitude', 'dayTimeStart', 'dayTimeEnd', 'replenishmentDays'))
              this.form.setFieldsValue({ endTime: res.result.endTime ? moment(this.model.endTime) : null })
            })
          }
          console.log(res);
        })
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(record, 'orgCategory','departName', 'parentId', 'orgCode', 'departOrder', 'mobile', 'fax', 'address', 'memo'));
        });
      },
      clearForm() {
        this.form.resetFields();
        this.treeData = [];
      },
      getArea() {
        getAction(this.url.areaJson).then((res) => {
          this.areaData = res
        })
      },
      getPictureView(){
        if(this.pictureUrl !== null && this.pictureUrl !== undefined && this.pictureUrl !== ''){
          if('http' === this.pictureUrl.substring(0,4)){
            return this.pictureUrl;
          }
          return this.url.imgerver +"/"+ this.pictureUrl;
        }
      },
      getLogoView(){
        if(this.logoUrl !== null && this.logoUrl !== undefined && this.logoUrl !== ''){
          if('http' === this.logoUrl.substring(0,4)){
            return this.logoUrl;
          }
          return this.url.imgerver +"/"+ this.logoUrl;
        }
      },
      getQrCodeView(){
        if(this.qrCodeUrl !== null && this.qrCodeUrl !== undefined && this.qrCodeUrl !== ''){
          if('http' === this.qrCodeUrl.substring(0,4)){
            return this.qrCodeUrl;
          }
          return this.url.imgerver +"/"+ this.qrCodeUrl;
        }
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>